import Vue from "vue";
import Vuex from "vuex";

// import { ADD } from "./mutation-types";

Vue.use(Vuex);

const store = new Vuex.Store({
  // state表示全局的状态, 这里是存放全局数据的地方
  // state单一数据源, 定义和data是一样的
  state: {
    name: "pengshao",
    age: 22,
    sex: 1,
    address: "九堡",
    count: 1,
    arr: [1, 2, 3, 4, 5, 6, 7, 8],
  },
  // mutations写函数，用于改变state的值的，唯一可以改变state的地方
  // 只有mutations来改数据，在开发工具里面才会有记录
  // mutations可以接受一个参数是state, 第二个参数是payload(载荷)
  // 开发工具的快照是在mutations函数触发的时候生成的，不是在数据改变的时候生成
  // mutations只能是同步函数
  mutations: {
    add(state, payload) {
      state.count += payload.num;
    },
    minus(state, payload) {
      state.count -= payload.num;
    },
  },
  // actions也是写函数的
  // actions是不能改变state的
  actions: {
    asyncMinus({ commit }, payload) {
      setTimeout(() => {
        commit("minus", payload);
      }, 2000);
    },
  },
  // getters就是vuex里面的计算属性
  getters: {
    oddArr(state) {
      return state.arr.filter((item) => item % 2);
    },
  },
  modules: {},
});

export default store;
